<script setup lang="ts">
import {CommonTable} from "@/components/MyComponent/CommonTable/tableInterface";
import {Shop} from "@/api/sys/dnf/shop/types";
import {addShopApi, buyShopApi, deleteShopApi, editShopApi, getShopByIdApi, getShopListApi} from "@/api/sys/dnf/shop";
import {DictType, Perm} from "@/utils/enum-type";
import {getDictOptions} from "@/api/sys/admin/dict";
import {commonFormat} from "@/utils/format-table";
import {openConfirm} from "@/components/MyComponent/XMessageBox";
import {useMoneyStore} from "@/store/views/sys/dnf/money";
import {useUserItemStore} from "@/store/views/sys/dnf/user-item";

const options: CommonTable<Shop, Shop> = {
  api: {
    add: addShopApi,
    remove: deleteShopApi,
    edit: editShopApi,
    get: getShopByIdApi,
    getList: getShopListApi,
  },
  perms: {
    add: Perm.DnfShopAdd,
    remove: Perm.DnfShopDelete,
    edit: Perm.DnfShopEdit,
    view: Perm.DnfShopView,
  },
  attrs: [
    {
      prop: 'name',
      label: '名称'
    },
    {
      prop: 'imageUrl',
      label: '图片',
      formType: 'image',
      image: {
        size: 2,
        borderRadius: '0.5em',
        path: 'shop',
      }
    },
    {
      prop: 'price',
      label: '价格',
      formType: 'number',
      query: false
    },
    {
      prop: 'priceType',
      label: '价格类型',
      formType: 'radio',
      code: 'dnf_price_type',
    },
    {
      prop: 'itemNum',
      label: '物品数量',
      formType: 'number',
      query: false,
      sort: false
    },
    {
      prop: 'itemType',
      label: '物品类型',
      formType: 'select',
      code: 'dnf_item_type',
    }, {
      prop: 'remark',
      label: '描述',
      formType: 'textarea',
      query: false,
      sort: false,
      notDisplayOn: ['list']
    },
    {
      prop: 'status',
      label: '状态',
      formType: 'radio',
      notDisplayOn:['list-phone'],
      code: DictType.Status
    }
  ],
  title: '装备配置',
  queryData: {
    pageSize: 20,
    order: {
      priceType: 'asc',
      itemNum: 'asc'
    }
  },
  form: {
    labelWidth: 100,
    initialForm: {id: 0, name: '', price: 1, priceType: 1, itemType: 1, itemNum: 1, status: 1},
    rules: {
      name: [{required: true, message: '请输入物品名称', trigger: 'blur'}],
      price: [{required: true, message: '请输入物品价格', trigger: 'blur'},
        {type: 'number', message: '最少为1', min: 1}],
      itemNum: [{required: true, message: '请输入物品数量', trigger: 'blur'},
        {type: 'number', message: '最少为1', min: 1}],
      priceType: [{required: true, message: '请选择价格类型', trigger: 'blur'}],
      itemType: [{required: true, message: '请选择物品类型', trigger: 'blur'}],
    }
  }
}
const moneyStore = useMoneyStore()
const userItemStore = useUserItemStore()
const {getList} = moneyStore

async function buy(id: number) {
  const shop = await getShopByIdApi(id)
  const options = await getDictOptions(DictType.DnfPriceType)
  const msg = `确定购买[${shop.name}],费用[${shop.price}${commonFormat(shop.priceType, options)}]`
  if (await openConfirm(msg)) {
    buyShopApi(id).then(() => {
      ElMessage.success('购买成功')
      getList()
      userItemStore.getList()
    })
  }
}
</script>
<template>
  <dnf-user-info/>
  <x-common-table :options="options">
    <template #operation="{row}" v-perm="[Perm.DnfShopBuy]">
      <el-button link type="primary" size="small" @click="buy(row.id)">
        <i-ep-shopping-cart/>
        <span>购买</span>
      </el-button>
    </template>
  </x-common-table>
</template>
<style scoped lang="scss">
</style>